html {
  background-color: #22312d;
  font-family: "楷体", "楷体_GB2312", "KaiTi", serif;
  &::before {
    content: "";
    display: block;
    height: 30px;
    background-color: #22312d;
    position: sticky;
    top: 0;
  }
}
body {
  margin: 0;
}
article {
  background-color: #f5ebd4;
  padding: 1em 0.5em;
  border-left: 10px solid #405c53;
  border-right: 10px solid #405c53;
  margin: 0 15px;
  p {
    margin: 0;
    padding: 0.2em 0;
    color: #2c402e;
    line-height: 150%;
    text-indent: 2em;
  }
}
.reel {
  position: sticky;
  top: 10px;
  height: 28px;
  margin: 0 15px;
  border-radius: 1px;
  border-image: url(../assets/images/reel.png) fill 40 36 / 14px 12px / 0 12px;
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.3),
    0 10px 20px 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  .reel-bg {
    position: absolute;
    left: 0;
    width: 100%;
    height: 368px;
    background: url(../assets/images/texture.jpg) 50% 0 / auto 50%;
    mix-blend-mode: multiply;
  }
}
@supports (animation-timeline: scroll()) {
  .reel-bg {
    --s: 999999;
    animation: scroll 1s linear forwards calc(var(--s) / 184 / 3.14);
    animation-timeline: scroll(root);
    animation-range: 0 calc(var(--s) * 1px);
  }
}

@keyframes scroll {
  0% {
    transform: translateY(-80%);
  }
  100% {
    transform: translateY(-30%);
  }
}
::-webkit-scrollbar {
  display: none;
}
